<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大文件上传</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #f8f8f8;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #333;
            flex-direction: column;
        }

        h2 {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .upload-container {
            width: 100%;
            max-width: 600px;
            text-align: center;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
            padding: 40px 30px;
            box-sizing: border-box;
        }

        input[type="file"] {
            padding: 12px 18px;
            background-color: #f2f2f2;
            border: 2px solid #ddd;
            border-radius: 5px;
            color: #333;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
            margin: 10px 0;
            transition: all 0.3s ease;
        }

        input[type="file"]:hover {
            border-color: #4caf50;
        }

        button {
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 14px 28px;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
        }

        button:hover {
            background-color: #45a049;
        }

        #progress {
            width: 100%;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            margin-top: 20px;
        }

        #progress-bar {
            height: 100%;
            background-color: #4caf50;
            width: 0;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        #status {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            text-align: center;
        }

        .copy-btn {
            text-decoration: none;
            color: #4caf50;
            font-weight: 600;
            padding: 10px 20px;
            border: 2px solid #4caf50;
            border-radius: 5px;
            margin-top: 20px;
            display: inline-block;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .copy-btn:hover {
            background-color: #4caf50;
            color: white;
            border: 2px solid #45a049;
        }

        @media (max-width: 600px) {
            .upload-container {
                padding: 30px 20px;
            }

            button {
                padding: 12px 24px;
            }

            input[type="file"] {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<div class="upload-container">
    <h2>大文件上传</h2>
    <input type="file" id="fileInput" />
    <button onclick="startUpload()">开始上传</button>
    <div id="progress">
        <div id="progress-bar"></div>
    </div>
    <div id="status"></div>
</div>

<script>
    const chunkSize = 5 * 1024 * 1024; // 每个分块大小 5MB
    let file;
    let totalChunks;
    let uploadedChunks = 0;
    let uploadUrl = "/file/uploadChunk";
    let mergeUrl = "/file/mergeChunks";

    // 选择文件时设置文件信息
    document.getElementById('fileInput').addEventListener('change', (event) => {
        file = event.target.files[0];
        totalChunks = Math.ceil(file.size / chunkSize);
    });

    // 开始上传
    async function startUpload() {
        if (!file) {
            alert("请选择一个文件！");
            return;
        }

        uploadedChunks = 0;
        updateProgress(0);
        document.getElementById('status').innerText = "上传中...";

        // 上传所有分块
        const promises = [];
        for (let i = 0; i < totalChunks; i++) {
            const chunk = file.slice(i * chunkSize, Math.min((i + 1) * chunkSize, file.size));
            promises.push(uploadChunk(i, chunk));
        }

        // 等待所有分块上传完毕
        await Promise.all(promises);

        // 合并分块
        await mergeChunks();
    }

    // 上传一个分块
    async function uploadChunk(chunkIndex, chunk) {
        const formData = new FormData();
        formData.append("file", chunk);
        formData.append("chunkIndex", chunkIndex);
        formData.append("fileId", file.name);

        try {
            await fetch(uploadUrl, {
                method: "POST",
                body: formData,
            });
            uploadedChunks++;
            updateProgress((uploadedChunks / totalChunks) * 100);
        } catch (error) {
            console.error("上传分块失败", error);
        }
    }

    // 合并所有分块
    async function mergeChunks() {
        const formData = new FormData();
        formData.append("fileId", file.name);

        try {
            const response = await fetch(mergeUrl, {
                method: "POST",
                body: formData,
            });
            const text = await response.text();
            if (response.ok) {
                // 创建并显示复制链接按钮
                const downloadLink = location.host + text;
                document.getElementById('status').innerHTML = "<br><button class='copy-btn' onclick='copyToClipboard(\"" + downloadLink + "\")'>复制下载地址</button>";
            } else {
                alert("文件合并失败");
            }
        } catch (error) {
            console.error("合并失败", error);
        }
    }

    // 更新进度条
    function updateProgress(percentage) {
        document.getElementById('progress-bar').style.width = percentage + "%";
    }

    // 复制下载地址到剪贴板
    function copyToClipboard(url) {
        navigator.clipboard.writeText(url)
            .then(() => {
                alert('下载地址已复制到剪贴板');
            })
            .catch((error) => {
                console.error('复制失败:', error);
            });
    }
</script>
</body>
</html>
